<template>
  <div>
    <el-dialog :append-to-body="true" :visible.sync="dialogVisible" width="940px">
      <div slot="title">
        <b class="def-b">{{ title }}</b>
      </div>
      <div>
        <div v-loading="loading">
          <div class="form-seach">
            <el-form ref="form" :model="BindForm" label-width="80px" label-position="left">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="搜索门店:" prop="searchKey" class="form-item">
                    <el-input v-model="BindForm.searchKey" placeholder="请输入搜索关键字" maxlength="30" class="cus-input" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item prop="allCity" label="地区:">
                    <el-col :span="24" style="align-items: center;display: flex;">
                      <el-checkbox v-model="BindForm.allCity" label="全部" border @change="changedAllCity" />
                      <city-select ref="citySelect" v-model="BindForm.address" @change="changedAddress" />
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item class="form-item">
                <el-button type="primary" @click="search">筛选</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="dialogVisible" class="ele-table">
            <el-table :data="BindTable" highlight-current-row border max-height="280" :empty-text="loading ? '数据加载中' : (isSearch ? '未找到相关的商品' : '暂无商品')" @row-click="select">
              <el-table-column
                label="门店编号"
                prop="id"
                align="center"
                width="130"
                :resizable="false"
                fixed="left"
              />
              <el-table-column
                label="门店名称"
                prop="storeName"
                align="center"
                :resizable="false"
              />
              <el-table-column
                label="门店地址"
                prop="address"
                align="center"
                :resizable="false"
              />
              <el-table-column
                label="操作"
                header-align="center"
                align="center"
                fixed="right"
                width="100"
                :resizable="false"
              >
                <template slot-scope="scope">
                  <el-button size="small" type="primary" @click="select(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <div />
            <el-pagination
              background
              :page-sizes="[10, 20, 30, 50, 100]"
              :page-size="limit"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="pageSizeChange"
              @current-change="currentPageChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { storeList } from '@/api/shop'
import CitySelect from '../CitySelect/index'

export default {
  name: 'AddStoreDialog',
  components: { CitySelect },
  props: {
    title: {
      type: String,
      default: '请选择门店'
    }
  },
  data() {
    return {
      dialogVisible: false,
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      BindForm: {
        allCity: true,
        searchKey: null,
        address: {
          province: null,
          city: null,
          village: null
        }
      },
      BindTable: []
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this
      vm.reloadTableData()
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.reloadTableData()
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.loadTableData()
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    changedAllCity() {
      const vm = this
      if (vm.BindForm.allCity) {
        if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
          vm.$refs.citySelect.resetFields()
        }
      } else {
        if (!vm.BindForm.address.province || !vm.BindForm.address.city || !vm.BindForm.address.village) {
          vm.BindForm.allCity = true
        }
      }
    },
    changedAddress() {
      const vm = this
      if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
        vm.BindForm.allCity = false
      } else {
        vm.BindForm.allCity = true
      }
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.searchKey && vm.BindForm.searchKey.length > 0) {
        data['searchKey'] = vm.BindForm.searchKey
        vm.isSearch = true
      }

      if (vm.BindForm.address.province || vm.BindForm.address.city || vm.BindForm.address.village) {
        data['address'] = {}
        if (vm.BindForm.address.province) {
          data['address']['province'] = vm.BindForm.address.province.code
        }
        if (vm.BindForm.address.city) {
          data['address']['city'] = vm.BindForm.address.city.code
        }
        if (vm.BindForm.address.village) {
          data['address']['area'] = vm.BindForm.address.village.code
        }
        vm.isSearch = true
      }

      vm.loading = true
      storeList(data).then(res => {
        vm.loading = false
        vm.total = res.data.data.total
        vm.BindTable = res.data.data.list ? res.data.data.list : []
      }).catch(res => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    select(val) {
      const vm = this

      vm.dialogVisible = false
      vm.$emit('select', val)
    }
  }
}
</script>

<style lang="scss" scoped>
  .def-b {
    border-left: 4px solid #3783ff;
    padding-left: 10px;
    word-break: break-all;
    width: calc(100% - 30px);
    display: flex;
    align-items: center;
  }

  .form-seach {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin-bottom: 30px;
    border: 1px solid #eeeeee;

    .form-item {
      margin-bottom: 22px !important;
    }

  }

  .ele-table {
    margin-bottom: 30px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ::v-deep.el-radio {
    margin-right: 15px !important;
  }
  ::v-deep.el-radio.is-bordered+.el-radio.is-bordered {
    margin-left: 0 !important;
    margin-bottom: 15px !important;
  }
</style>
